<template>
	<view>
		<uni-forms :modelValue="form" label-position="top" label-width="100%">
			<uni-forms-item v-for="config in props.configList" :key="config.key"
			 :label="config.name" :name="config.key" >
				
				<!-- 输入框 -->
				<uni-easyinput type="text" v-model="form[config.key]" :placeholder="config.placeholder"
				 v-if="config.type=='text'" :disabled="disabled||config.disabled"/>
				 
				 <!-- 日期选择器 -->
				 <uni-datetime-picker type="datetime" :clear-icon="false"
				 	v-model="form[config.key]" v-if="config.type=='datetime'" :disabled="disabled||config.disabled"/>
					
				<!-- 单选框 -->
				<u-radio-group v-model="form[config.key]" v-if="config.type === 'radio'" :disabled="disabled||config.disabled">
				    <u-radio v-for="(item, index) in config.options||defindeOptions" :key="index" :label="item.label" :name="item.value"
					style="margin-right: 16rpx;" size="12px">
				    </u-radio>
			  </u-radio-group>
			</uni-forms-item>
		</uni-forms>
	</view>
</template>

<script setup>
	import { computed } from "vue"
	
	const props = defineProps({
		modelValue: {
			type: Object,
			default: function() { return { name: "" } }
		},
		configList:{
			type: Array,
			default: function () {
				return [
					{ key: "name", name:"名称", type: "input", default:"", placeholder:"请输入名称", options: [
						{ label: "label1", value: "1" }, { label: "label2", value: "2" },
					] }
				]
			}
		},
		disabled: {
			type: Boolean,
			default: false
		}
	})
	// 默认的单选框
	const defindeOptions = [
		{ label: "正常", value: '0' },
		{ label: "不正常", value: '1' },
	]
	const emits = defineEmits(["updata:modelValue"])
	
	const form = computed({
		get() {
			return props.modelValue
		},
		set(val) {
			emits("updata:modelValue", val)
		}
	})
	
	
</script>

<style lang="scss" scoped>
	:deep(.uni-input-input:disabled) {
		-webkit-text-fill-color: #333;
	}
	:deep(.uni-date__x-input) {
		color: #000;
	}
	:deep(.u-radio__icon-wrap--disabled--checked) {
		background-color: #007aff !important;
		border-color: #007aff !important;
	}
</style>